<template>
    <el-dialog
        :title="editQuestionText"
        :visible.sync="editQuListDialog"
        :close-on-click-modal="false"
        width="70%"
    >
        <div class="qu-dialog">
            <div class="dia-qu-content">
                <div class="qu-dia-box">
                    <el-row>
                        <el-col :span="2">
                            <div><span>题型</span></div>
                        </el-col>
                        <el-col :span="22">
                            <div>
                                <el-select v-model="quForm.typeId" placeholder="请选择" @change="handChangeType" clearable>
                                    <el-option
                                        v-for="item in qTypeArray"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.id">
                                    </el-option>
                                </el-select>
                            </div>
                        </el-col>
                    </el-row>
                </div>
                <div class="qu-dia-box">
                    <el-row>
                        <el-col :span="2">
                            <div><span>{{ questionType === 6 ? "主题干" : "题干" }}</span></div>
                        </el-col>
                        <el-col :span="22">
                            <div class="quill-d">
                                <quill-input v-model="quForm.mainStem"
                                             :input-value.sync="quForm.mainStem"></quill-input>
                            </div>
                        </el-col>
                    </el-row>
                </div>
                <!-- 单选 多选 填空 -->
                <div v-if="questionType === 1 || questionType === 2 || questionType === 4 || questionType === 7">
                    <div class="qu-dia-box">
                        <el-row>
                            <el-col :span="2">
                                <div><span>{{ questionType === 4 ? "填空" : "选项" }}</span></div>
                            </el-col>
                            <el-col :span="22">
                                <div v-if="questionType === 4  ">
                                    <div v-for="(item,index) in quForm.fillOptions" :key="index">
                                        <div class="he-option">
                                            <el-row>
                                                <el-col :span="18">
                                                    <div v-if="!item.isQuill">
                                                        <el-input
                                                            ref="input"
                                                            v-model="item.value"
                                                            type="textarea"
                                                            :autosize="{ minRows: 1,maxRows: 8, }"
                                                            class="full-height"
                                                            placeholder="请输入答案"
                                                            @focus="focus = true"
                                                            @blur="focus = false">
                                                        </el-input>
                                                    </div>
                                                    <div v-else class="quill-d">
                                                        <quill-input v-model="item.value"
                                                                     :input-value.sync="item.value"></quill-input>
                                                    </div>
                                                </el-col>
                                                <el-col :span="6">
                                                    <div>
                                                        <el-button
                                                            :icon="item.isQuill ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
                                                            @click="clickExpand(2,index)">{{
                                                                item.isQuill ? "收起" : "展开"
                                                            }}
                                                        </el-button>
                                                        <el-button type="danger" icon="el-icon-delete"
                                                                   @click="deleteOption(2,index)"></el-button>
                                                    </div>
                                                </el-col>
                                            </el-row>
                                        </div>
                                    </div>
                                </div>
                                <div v-else>
                                    <div v-for="(item,index) in quForm.heOptions" :key="index">
                                        <div class="he-option">
                                            <el-row :gutter="0">
                                                <el-col :span="1">
                                                    <div style="">
                                                        <el-tooltip class="item" effect="dark" content="点击设为答案"
                                                                    placement="top">
                                                            <div class="c-btn-d"
                                                                 :class="item.isAnswer?'bg-color2':'bg-color1'"
                                                                 @click="choiceAnswer(index)"><span v-if="item.isAnswer"
                                                                                                    style="font-size:12px">答案</span>
                                                                {{ item.name }}
                                                            </div>
                                                        </el-tooltip>
                                                    </div>
                                                </el-col>
                                                <el-col :span="19">
                                                    <div v-if="!item.isQuill">
                                                        <el-input
                                                            ref="input"
                                                            v-model="item.value"
                                                            type="textarea"
                                                            :autosize="{ minRows: 1,maxRows: 8, }"
                                                            class="full-height"
                                                            placeholder="请输入选项"
                                                            @focus="focus = true"
                                                            @blur="focus = false">
                                                        </el-input>
                                                    </div>
                                                    <div v-else class="quill-d">
                                                        <quill-input v-model="item.value"
                                                                     :input-value.sync="item.value"></quill-input>
                                                    </div>
                                                </el-col>
                                                <el-col :span="4">
                                                    <div>
                                                        <el-button
                                                            :icon="item.isQuill ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
                                                            @click="clickExpand(1,index)">{{
                                                                item.isQuill ? "收起" : "展开"
                                                            }}
                                                        </el-button>
                                                        <el-button type="danger" icon="el-icon-delete"
                                                                   @click="deleteOption(1,index)"></el-button>
                                                    </div>
                                                </el-col>
                                            </el-row>
                                        </div>
                                    </div>
                                </div>
                                <div class="he-option">
                                    <el-row>
                                        <el-col :span="4">
                                            <div v-if="questionType === 4" @click="addQuestionOption(2)">
                                                <el-button type="primary" icon="el-icon-plus" plain>添加填空</el-button>
                                            </div>
                                            <div v-else @click="addQuestionOption(1)">
                                                <el-button type="primary" icon="el-icon-plus" plain>添加选项</el-button>
                                            </div>
                                        </el-col>
                                        <el-col :span="6">
                                            <div>
                                                <label>难易度：</label>
                                                <el-select v-model="quForm.diffVl" placeholder="请选择">
                                                    <el-option
                                                        v-for="item in diffOption"
                                                        :key="item.value"
                                                        :label="item.label"
                                                        :value="item.value">
                                                    </el-option>
                                                </el-select>
                                            </div>
                                        </el-col>
                                        <el-col :span="6">
                                            <div>
                                                <label>分数：</label>
                                                <el-input v-model.number="quForm.score" :disabled="!isEditScore"
                                                          style="width: 60px"></el-input>
                                            </div>
                                        </el-col>
                                    </el-row>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                </div>
                <!-- 判断题 -->
                <div v-if="questionType === 3">
                    <div class="qu-dia-box">
                        <el-row>
                            <el-col :span="2">
                                <div><span>答案</span></div>
                            </el-col>
                            <el-col :span="22">
                                <div class="he-option">
                                    <el-row>
                                        <el-col :span="6">
                                            <div>
                                                <label>正确答案：</label>
                                                <el-select v-model="quForm.answer" placeholder="请选择">
                                                    <el-option
                                                        v-for="item in rightAnswerOption"
                                                        :key="item.value"
                                                        :label="item.label"
                                                        :value="item.value">
                                                    </el-option>
                                                </el-select>
                                            </div>
                                        </el-col>

                                        <el-col :span="6">
                                            <div>
                                                <label>难易度：</label>
                                                <el-select v-model="quForm.diffVl" placeholder="请选择">
                                                    <el-option
                                                        v-for="item in diffOption"
                                                        :key="item.value"
                                                        :label="item.label"
                                                        :value="item.value">
                                                    </el-option>
                                                </el-select>
                                            </div>
                                        </el-col>
                                        <el-col :span="6">
                                            <div>
                                                <label>分数：</label>
                                                <el-input v-model.number="quForm.score" :disabled="!isEditScore"
                                                          style="width: 60px"></el-input>
                                            </div>
                                        </el-col>
                                    </el-row>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                </div>
                <div v-if="questionType === 5">
                    <div class="qu-dia-box">
                        <el-row>
                            <el-col :span="2">
                                <div><span>答案</span></div>
                            </el-col>
                            <el-col :span="22">
                                <div class="he-option">
                                    <el-row>
                                        <el-col :span="18">
                                            <div class="quill-d">
                                                <quill-input v-model="answerText"
                                                             :input-value.sync="answerText"></quill-input>
                                            </div>
                                        </el-col>
                                    </el-row>
                                </div>
                                <div class="he-option">
                                    <el-row>
                                        <el-col :span="6">
                                            <div>
                                                <label>难易度：</label>
                                                <el-select v-model="quForm.diffVl" placeholder="请选择">
                                                    <el-option
                                                        v-for="item in diffOption"
                                                        :key="item.value"
                                                        :label="item.label"
                                                        :value="item.value">
                                                    </el-option>
                                                </el-select>
                                            </div>
                                        </el-col>
                                        <el-col :span="6">
                                            <div>
                                                <label>分数：</label>
                                                <el-input v-model.number="quForm.score" :disabled="!isEditScore"
                                                          style="width: 60px"></el-input>
                                            </div>
                                        </el-col>
                                    </el-row>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                </div>
                <div v-if="questionType !== 6" class="qu-dia-box">
                    <el-row>
                        <el-col :span="2">
                            <div><span>解析</span></div>
                        </el-col>
                        <el-col :span="18">
                            <div class="quill-d">
                                <quill-input v-model="quForm.desc" :input-value.sync="quForm.desc"></quill-input>
                            </div>
                        </el-col>
                    </el-row>
                </div>
                <div v-if="questionType === 6">
                    <div class="qu-dia-box">
                        <el-row>
                            <el-col :span="2">
                                <div><span>设置：</span></div>
                            </el-col>
                            <el-col :span="6">
                                <div>
                                    <label>难易度：</label>
                                    <el-select v-model="quForm.diffVl" placeholder="请选择">
                                        <el-option
                                            v-for="item in diffOption"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                        </el-option>
                                    </el-select>
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <div>
                                    <label>分数：</label>
                                    <el-input v-model.number="quForm.score" style="width: 60px"
                                              :disabled="!isEditScore"></el-input>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                </div>

            </div>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button @click="cancelListQuestion">取 消</el-button>
            <el-button type="primary" @click="submitListQuestion()" :disabled="commitDisable" >确 定</el-button>
        </div>
    </el-dialog>
</template>

<script>
import QuillInput from "@/views/models/exam/questionBase/question/components/QuillInput";

export default {
    name: "AddQuestionBox",
    components: {QuillInput},
    props: {
        questionType: {
            type: Number,
            default: null,
        },
        qTypeArray: {
            type: Array,
            default: () => []
        },
        editQuestionText: {
            type: String,
            default: ""
        },
        cateGoryId: {
            type: Number,
            default: null,
        },
    },
    data() {
        return {
            version: 0,
            answerText: "",
            quForm: {},
            commitDisable:false,
            rightAnswerOption: [
                {
                    value: 1,
                    label: "正确"
                },
                {
                    value: 0,
                    label: "错误"
                },
            ],
            diffOption: [
                {
                    value: "easy",
                    label: "简单"
                },
                {
                    value: "normal",
                    label: "普通"
                },
                {
                    value: "difficult",
                    label: "困难"
                }
            ],
            quTypeId: "",
            editQuListDialog: false,
            sourceId: "",
            qChildren: [],
            isEditScore: true //是否可以编辑试题分数
        }
    },
    watch: {
        answerText(vl) {
            if (this.questionType === 5) {
                this.quForm.answer = vl;
            }
        },
        qTypeArray(vl) {
            if (this.quForm.typeId === "" && vl.length > 0) {
                this.quForm.typeId = vl[0].id
            }
        }
    },
    created() {
        console.log("qTypeArray",this.qTypeArray)
        this.version++;
    },
    methods: {
        openDialog(vl, s) {
            this.commitDisable =  false;
            this.quForm = Object.assign({}, vl);
            if(this.quForm.id === undefined){
                this.quForm.diffVl = "normal";
            }
            this.answerText = vl.answer;
            if (s) {
                this.isEditScore = false;
            }
            this.editQuListDialog = true;
        },
        closeDialog() {
            this.editQuListDialog = false;
            this.commitDisable =  false;
            this.initQuForm();
        },
        // 取消编辑
        cancelListQuestion() {
            this.quForm.typeId = "";
            this.editQuListDialog = false;
            this.commitDisable =  false;
        },
        // 添加选项
        addQuestionOption(type) {
            let mapObj = {
                "1": "A",
                "2": "B",
                "3": "C",
                "4": "D",
                "5": "E",
                "6": "F",
                "7": "G",
                "8": "H",
                "9": "I",
                "10": "J",
                "11": "K",
                "12": "L",
                "13": "M",
                "14": "N",
                "15": "O",
                "16": "P",
                "17": "Q"
            };
            let optionLength = this.quForm.heOptions.length + 1;
            if (type === 1) {
                let item = {
                    name: mapObj[optionLength],
                    value: "",
                    isQuill: false,
                    isAnswer: false
                }
                this.quForm.heOptions.splice(this.quForm.heOptions.length, 0, item);
            }
            if (type === 2) {
                let data = {
                    name: "",
                    value: "",
                    isQuill: false
                }
                this.quForm.fillOptions.splice(this.quForm.fillOptions.length, 0, data);
            }
        },
        // 删除选项
        deleteOption(type, index) {
            let mapObj = {
                "1": "A",
                "2": "B",
                "3": "C",
                "4": "D",
                "5": "E",
                "6": "F",
                "7": "G",
                "8": "H",
                "9": "I",
                "10": "J",
                "11": "K",
                "12": "L",
                "13": "M",
                "14": "N",
                "15": "O",
                "16": "P",
                "17": "Q"
            };
            if (type === 1) {
                this.quForm.heOptions.splice(index, 1);
                this.quForm.heOptions = this.quForm.heOptions.map((v, index) => {
                    v.name = mapObj[index + 1];
                    return v;
                });
            }
            if (type === 2) {
                this.quForm.fillOptions.splice(index, 1);
            }
        },
        // 选择答案
        choiceAnswer(index) {
            if (this.questionType === 1) {
                this.quForm.heOptions = this.quForm.heOptions.map(v => {
                    v.isAnswer = false;
                    return v;
                })
            }
            this.quForm.heOptions[index].isAnswer = !this.quForm.heOptions[index].isAnswer;
        },
        // 扩展|收起
        clickExpand(type, index) {
            if (type === 1) {
                this.quForm.heOptions[index].isQuill = !this.quForm.heOptions[index].isQuill;
            }
            if (type === 2) {
                this.quForm.fillOptions[index].isQuill = !this.quForm.fillOptions[index].isQuill;
            }
        },
        handChangeType(vl) {
            this.quForm.typeId = vl;
        },
        // 保存试题
        submitListQuestion() {

            let quData = this.quForm;
            let isOption = true;
            if (this.quForm.id === null && this.cateGoryId === null) {
                return this.$message({
                    message: "警告，请先选择学科",
                    type: "warning"
                });
            }
            if (quData.mainStem === "") {
                return this.$message({
                    message: "警告，题干不能为空",
                    type: "warning"
                });
            }
            if (this.questionType === 1 || this.questionType === 2 || this.questionType === 7) {
                let qAnswer = false;
                if (quData.heOptions !== undefined && quData.heOptions.length > 0) {
                    quData.heOptions.forEach(v => {
                        switch (v.value) {
                        case "":
                            isOption = false;
                            break;
                        }
                    })
                    quData.heOptions.forEach(v => {
                        if (v.isAnswer) {
                            return qAnswer = true;
                        }
                    })
                }
                if (!isOption) {
                    return this.$message({
                        message: "警告，选项内容不能为空",
                        type: "warning"
                    });
                }
                if (!qAnswer) {
                    return this.$message({
                        message: "警告，请点击选项按钮选择答案",
                        type: "warning"
                    });
                }
            }
            if (this.questionType === 3) {
                if (quData.answer === "") {
                    return this.$message({
                        message: "警告，判断答案不能选择为空",
                        type: "warning"
                    });
                }
            }
            if (this.questionType === 4) {
                let isFillVl = true;
                if (quData.fillOptions !== undefined && quData.fillOptions.length > 0) {
                    quData.fillOptions.forEach(v => {
                        switch (v.value) {
                        case "":
                            isFillVl = false;
                            break;
                        }
                    })
                }
                if (!isFillVl) {
                    return this.$message({
                        message: "警告，填空答案不能为空",
                        type: "warning"
                    });
                }
            }
            if (this.questionType === 5) {
                if (quData.answer === "") {
                    return this.$message({
                        message: "警告，问答题答案不能为空",
                        type: "warning"
                    });
                }
            }
            if (quData.score === null) {
                return this.$message({
                    message: "警告，分数不能为空",
                    type: "warning"
                });
            } else {
                if (!Number.isFinite(quData.score)) {
                    return this.$message({
                        message: "分数请输入数字值",
                        type: "warning"
                    });
                }
                if (quData.score < 0) {
                    return this.$message({
                        message: "分数请输入大于0的数字",
                        type: "warning"
                    });
                } else if (quData.score > 50) {
                    return this.$message({
                        message: "分数请输入小于等于50的数字",
                        type: "warning"
                    });
                }
                if (this.quForm.id === undefined || this.quForm.id === null) {
                    if (this.quForm.sourceId !== null && this.quForm.sourceId !== undefined) {
                        // 验证复合题小题的分数
                        let tscore = 0;
                        if (this.quForm.question.children !== null && this.quForm.question.children.length > 0) {
                            this.quForm.question.children.map(v => {
                                tscore += v.score
                            });
                            let fscore = tscore + quData.score;
                            if (this.quForm.question.score < fscore) {
                                return this.$message({
                                    message: "所有小题分数相加不能大于复合题的分数",
                                    type: "warning"
                                });
                            }
                        }
                    }
                } else {
                    // 编辑复合题小题
                    if (this.quForm.sourceId !== null && this.quForm.sourceId !== undefined && this.quForm.sourceType !== 3) {
                        let tscore = 0;
                        if (this.quForm.question !== undefined) {
                            if (this.quForm.question.children !== null && this.quForm.question.children.length > 0) {
                                this.quForm.question.children.map(v => {
                                    if (v.id === this.quForm.id) {
                                        tscore += this.quForm.score;
                                    } else {
                                        tscore += v.score;
                                    }
                                });
                                if (this.quForm.question.score < tscore) {
                                    return this.$message({
                                        message: "所有小题分数相加不能大于复合题的分数",
                                        type: "warning"
                                    });
                                }
                            }
                        }
                    }
                }
            }
            this.commitDisable =  true;

            this.$emit("edit-qu-list", this.quForm);

            if (this.quForm.id !== undefined && this.quForm.id !== null) {
                this.closeDialog()
            } else {
                setTimeout(() => {
                    this.initQuForm();
                }, 1000)
            }
        },
        initQuForm() {
            if (this.quForm.sourceId !== undefined && this.quForm.sourceId !== null) {
                this.sourceId = this.quForm.sourceId;
                if(this.quForm.question !== undefined){
                    this.qChildren = Object.assign({}, this.quForm.question.children);
                }
            }
            this.quForm = {
                mainStem: "",
                answer: "",
                desc: "",
                score: 1,
                heOptions: [
                    {
                        name: "A",
                        value: "",
                        isAnswer: false,
                        isQuill: false
                    }, {
                        name: "B",
                        value: "",
                        isAnswer: false,
                        isQuill: false
                    },
                ],
                fillOptions: [
                    {
                        name: "",
                        value: "",
                        isQuill: false
                    },
                ],
                diffVl: "normal",
                isAnswerQuill: false,
                typeId:this.quForm.typeId
            };
            this.answerText = "";
            if (this.sourceId !== "") {
                this.quForm.question = {};
                this.quForm.sourceId = this.sourceId;
                this.quForm.question.children = this.qChildren;
            }
            this.commitDisable =  false;
        }
    },
}
</script>

<style lang="scss" scoped>
.dia-qu-content {
    width: 100%;
    background: #f6f7f7;
    border-radius: 5px;
    padding: 14px 20px 12px 20px;

    .qu-dia-box {
        padding: 12px 12px 12px 12px;

        .he-option {
            padding-top: 12px;

            .option {
                padding: 0 1em 0 0.42rem;
                color: #babfcb;
                border-right: none;
            }

            .border {
                border: 1px solid #e5e8ec;
                box-sizing: border-box;
                background-color: #fff;
            }

            .border.focus {
                border-color: var(--f-c-root);
            }

            .first-box {
                border-top-left-radius: 0.17rem;
                border-bottom-left-radius: 0.17rem;
            }

            .al-sl-start {
                align-self: flex-start;
            }

            .c-btn-d {
                width: 46px;
                height: 31px;
                border: solid 1px #a3d3ff;
                line-height: 31px;
                text-align: center;
                border-radius: 4px;
                cursor: pointer;
            }

            .bg-color1 {
                background: aliceblue;
                color: #46a6ff;
            }

            .bg-color2 {
                background: #1890FF;
                color: #fff;
            }
        }

        .quill-d {
            .quill-s {
                margin-bottom: 10px;
                background: #fff;
            }
        }
    }
}
</style>
